初期學到 ul li 列表結構，以為列表就是只有這種文字的列表形式

<ul>
 <li>文字文字文字</li>
 <li>文字文字文字</li>
 <li>文字文字文字</li>
</ul>

想說既然是叫列表結構，那就是列表、清單等等才會用到，後來看到可以用成一個個商品陳列，才發現原來可以這樣用，原本一直覺得看到這樣一個個區塊包起來直覺就要使用 div ?
而且無法理解用 div 和用 ul li 排版呈現的畫面都一樣，為什麼不用 div 就好 XD

示意範例

<ul>
 <li>
   <img src="…" alt="商品圖">
   <h2>商品標題</h2>
   <p>商品描述</p>
</li>
  <li>
   <img src="…" alt="商品圖">
   <h2>商品標題</h2>
   <p>商品描述</p>
</li>
….
</ul>

後來才發現沒有理解到 HTML 是讓瀏覽器知道該如何呈現網頁，從我們的眼睛看過去都是相同的，因為我們看的是畫面呈現來瞭解這邊的內容看起來類似因此這是一個主題，但是瀏覽器看的是標籤 <ul> <li> ，這時才更體會標籤的「語意」
使用 <ul> <li> 列表結構來表示，瀏覽器才會將每個 li 的內容解讀成一個主題，但若是使用 <div> ，瀏覽器就不會那樣解讀 ，因 <div> 本身是沒有語意的，通常拿來定義、劃分區塊及作為一個容器

因此多了一層為了要讓瀏覽器看懂的，正確表示我想要讓他呈現的，就比較了解許多地方為什麼要使用 ul li 了

另外 ul 或 ol 元素裡面只能放 li，根據規範 4.4 Grouping content — HTML5 說明，ul 的子元素必須由 li 項目組成才會是一個列表結構

參考資料：
HTML div 區塊元素 Division element 簡介
ul : The Unordered List element - HTML: Hypertext Markup Language | MDN